<html>
<head>
<script src="../../../resources/js-test.js"></script>
</head>
<body>
<p>HTMLSelectElement multiple attribute test when no size is specified</p>
<div id="console"></div>

<select multiple id="sel1" >
    <option value="1">One</option>
</select>

<select multiple id="sel2" >
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
    <option value="6">Six</option>
    <option value="7">Seven</option>
    <option value="8">Eight</option>
    <option value="9">Nine</option>
    <option value="10">Ten</option>
    <option value="11">Eleven</option>
    <option value="12">Twelve</option>
    <option value="13">Thirteen</option>
    <option value="14">Fourteen</option>
</select>

<select multiple id="sel3" >
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<script>

    function getElemById(elemId) {
        return document.getElementById(elemId);
    }

    function clientHeight(elemId) {
        var element = getElemById(elemId);
        return element.clientHeight;
    }

    shouldBe("clientHeight('sel2')", "clientHeight('sel1')");
    shouldBeTrue("getElemById('sel2').setAttribute('size', '5'); clientHeight('sel2') > clientHeight('sel1')");
    shouldBe("clientHeight('sel3')", "clientHeight('sel1')");
    shouldBeTrue("getElemById('sel3').setAttribute('size', '2'); clientHeight('sel3') < clientHeight('sel1')");
    shouldBe("getElemById('sel3').setAttribute('size', '0'); clientHeight('sel3')", "clientHeight('sel1')");
    shouldBe("getElemById('sel3').setAttribute('size', ''); clientHeight('sel3')", "clientHeight('sel1')");
    // '1+ef' is recognized as 1.  This is compatible with IE and Firefox.
    shouldBeTrue("getElemById('sel3').setAttribute('size', '1+ef'); clientHeight('sel3') < clientHeight('sel1')");
</script>
</body>
</html>
